<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    div.content-top-banner  .mui-slider-item span.tit{ height: 100%;  font-size: 28px;  padding: 0;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  }
    .focus { height:40px;  line-height:40px;  vertical-align: middle;  float: right; }
    .focus_btn{ font-size: 13px; padding: 0 15px; background: #1abf8a; display: inline-block; width: 70px; height: 30px; line-height: 30px; border-radius: 5px; }
    .focus_btn.on{ background: #999; }
</style>
<!--content-list-wrap-->
<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <!--content-top-banner-->
                <div id="banner"></div>
                <!--/content-top-banner-->
                <div id="contentList"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tpl-top">
<div class="content-top-banner">
    <div class="mui-slider" id="muiSlideList">
        <div class="mui-slider-group">
            <div class="mui-slider-item">
                <a data-id="{{resultList.id}}" class="thumb"><img style="width: 100%" src="{{resultList.head_url}}"/></a>
                <span class="tit">
                    <span style="font-size: 23px">{{resultList.unit_name}}</span>
                    <span style="font-size: 14px;padding: 10px">文章数：{{resultList.article_num}}  |  粉丝数：{{resultList.member_num}}</span>
                    <div class="focus">
                        <div class="focus_btn {{if resultList.focus == 1}}on{{/if}}">
                            <a href="javascript:;" id="focus" style="color: #fff;">{{if resultList.focus == 0}}+ 关注{{else}}已关注{{/if}}</a>
                        </div>
                    </div>
                </span>
            </div>
        </div>
    </div>
</div>
</script>

<script type="text/html" id="tplList">
    {{each resultList.list as value}}
    <a data-id="{{value.id}}" class="list-row {{if value.theme_img3}}three-row{{/if}}">
        <div class="inner">
            <div class="item text">
                <h2>{{value.title}}</h2>
                {{if !value.theme_img3}}
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <span>{{value.name}}</span>
                    <span>{{value.reading}} 阅读</span>
                </p>
                {{/if}}
            </div>
            <div class="item thumb">
                {{if value.theme_img1}}
                <span class="cell"><img src="{{value.theme_img1}}" alt=""></span>
                {{/if}}
                {{if value.theme_img2}}
                <span class="cell"><img src="{{value.theme_img2}}" alt=""></span>
                {{/if}}
                {{if value.theme_img3}}
                <span class="cell"><img src="{{value.theme_img3}}" alt=""></span>
                {{/if}}
            </div>
            {{if value.theme_img3}}
            <div class="item bottom">
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <span>{{value.name}}</span>
                    <span>{{value.reading}} 阅读</span>
                </p>
            </div>
            {{/if}}
        </div>
    </a>
    {{/each}}
</script>
<script>
    var _textIndex = 1, total_page = 0;

    //上拉加载数据
    function pullUp2Refresh() {
        var _this = this;
        //如果存在数据，则继续添加数据
        if (_textIndex < total_page) {
            $.ajax({
                url: _basePath + "/app/information/authorList",
                data: {
                    curPage: _textIndex + 1,
                    unit_id: ${id}
                },
                dataType: 'json',
                success: function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if (_textIndex < total_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }

    }
    
    function loadBanner() {
        $.ajax({
            url: _basePath + "/app/information/author",
            data: {
                unit_id: ${id}
            },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-top', data);
                    $("#banner").append(_html);
                }
            }
        });
    }

    //加载栏目资讯
    function loadInfoData() {
        //跳转页面
        $.ajax({
            url: _basePath + "/app/information/authorList",
            data: {
                curPage: 1,
                unit_id: ${id}
            },
            dataType: 'json',
            success: function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);
                    initPullUp();
                }else {
                    mui.toast(data['message'])
                }
            }
        });
    }

    $(function () {
        loadBanner();
        loadInfoData();
        initFocus();
    });
    
    function initFocus() {
        //关注
        mui('body').on("tap", "#focus",function () {
            $.ajax({
                url: _basePath + "/app/member/focus",
                data: {
                    unit_id: ${id}
                },
                dataType: 'json',
                success: function (data) {
                    if(undefined != typeof data.resCode && data.resCode == 0) {
                        if($(".focus_btn").hasClass("on")){
                            $("#focus").text("+ 关注");
                            $(".focus_btn").removeClass("on");
                            mui.toast("取消关注成功");
                        }else{
                            $("#focus").text("已关注");
                            $(".focus_btn").addClass("on");
                            mui.toast("关注成功");
                        }
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });

        //查看详情
        mui('body').on("tap", "a.list-row", function () {
            mui.openWindow({
                url: "<%=basePath%>app/page?pv=info_detail&id=" + $(this).data("id")
            })
        });
    }

    function initPullUp() {
        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    }
</script>
